﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="user_view_vue_component.aspx.cs" Inherits="Template.Web.Admin.user_view_vue_component" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <link href="../css/bootstrap-reset.css" rel="stylesheet" />
    <!--external css-->
    <link href="../assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <!-- Custom styles for this template -->
    <link href="../css/style.css" rel="stylesheet" />
    <link href="../css/style-responsive.css" rel="stylesheet" />
    <link href="../assets/toastr-master/toastr.css" rel="stylesheet" />
    <link rel="stylesheet" href="/scripts/blockui/blockUI.css" />
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]><script src="../js/html5shiv.js"></script><script src="../js/respond.min.js"></script><![endif]-->
</head>
<body>
    <section class="wrapper site-min-height" id="content">
        <!-- page start-->
        <view-component v-bind:config="config">
            <span slot="header">用户详情</span>
        </view-component>
        <!-- page end-->
    </section>
    <!-- js placed at the end of the document so the pages load faster -->
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/assets/toastr-master/toastr.js"></script>
    <!-- 按需加载 -->
    <script type="text/javascript" src="/scripts/vue/vue.js"></script>
    <script src="/scripts/blockui/jquery.blockUI.js"></script>
    <script type="text/javascript" src="/scripts/util/myUtil2.js"></script>
    <script src="/scripts/vue/component/viewComponent.js"></script>

    <%--<script type="x/template" id="view-template">
    <!-- page start-->
    <div class="col-xs-12">
        <section class="panel panel-primary">
            <header class="panel-heading">
                <i class="fa fa-search"></i>
                <slot name="header"><span>详情</span></slot>
            </header>
            <div class="panel-body">
                <form class="form-horizontal" role="form" id="myForm">
                    <div class="form-body">
                        <!--/row-->
                        <div class="row">
                            <template v-for="item in config.items">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="control-label col-md-3" v-text="item.name+':'"></label>
                                        <div class="col-md-9">
                                            <p class="form-control-static" id="item.id" v-text="model[item.id]"></p>
                                        </div>
                                    </div>
                                </div>
                                <template v-if="($index+1)%2===0">
                        </div>
                        <!--/row-->
                        <div class="row">
                            </template>
                            </template>
                        </div>
                    </div>
                    <div class="form-actions">
                        <div class="row">
                            <div class="col-md-offset-4 col-md-8">
                                <button id="btnReturn" type="button" class="btn btn-warning" v-on:click="jumpToList"><i
                                        class="fa fa-reply"></i>返回
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </section>
    </div>
    <!-- page end-->
    </script>--%>

    <%--<script>
        // 注册组件
        Vue.component('view-component', {
            template: '#view-template',
            props: {
                config: {
                    type: Object,
                    required: true
                }
            },
            data: function () {
                return {
                    model: {}
                }
            },
            created: function () {
                this.getModel();
            },
            methods: {
                // 显示等待动画
                showWaitAnimation: function (bool) {
                    if (bool) {
                        myUtil.blockUI({
                            target: this.formName,
                            message: '加载中，请稍等...'
                        });
                    } else {
                        myUtil.unblockUI(this.formName);
                    }
                },
                getModel: function () {
                    var self = this;
                    self.showWaitAnimation(true);
                    $.when($.ajax({
                        url: self.config.handlerUrl,
                        type: 'post',
                        data: {
                            action: 'detail',
                            id: self.config.id
                        },
                        dataType: 'json'
                    })).done(function (responseData) {
                        self.model = responseData;
                    }).fail(function () {
                        toastr.warning('数据获取失败！');
                    }).always(function () {
                        self.showWaitAnimation(false);
                    });
                },

                jumpToList: function () {
                    window.self.location.href = this.config.listUrl;
                }
            }
        });
    </script>--%>

    <script>
        // 实例化
        var vm = new Vue({
            el: '#content',
            data: {
                config: {
                    items: [
                        {
                            id: 'userName',
                            name: '用户姓名'
                        },
                        {
                            id: 'age',
                            name: '年龄'
                        },
                        {
                            id: 'telehpone',
                            name: '电话'
                        },

                    ],
                    id: myUtil.getUrlParam('id'),
                    handlerUrl: 'handler/userHandler.ashx',
                    listUrl: 'user_list_vue_component.aspx?state=has',
                    formName: '#myForm'
                }
            }
        });
    </script>
</body>
</html>

